<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>秒杀课程详情</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
        integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
    </script>
    <style>
        .block_right{
            /* height: 100px; */
            /* border: 1px solid red; */
            margin: 20px 0px 0px;
        }
        .btn_block{
            border: none;
            color: white;
            background-color: red;
            width: 150px;
            height: 50px;
            line-height: 50px;
            font-family: '宋体';
            margin: 10px 5px;
            font-weight: 700;
        }
        #seckill_num{
            text-align: center;
            width: 50px;
            height: 30px;
            line-height: 30px;
            color: #c0c0c0;
        }
        .row.seckill_info_block{
            margin: 0px;
            background-image: linear-gradient(#f42d90 0% ,#ff0f66 50% ,#ff0a58 100% );
            height: 40px;
            line-height: 40px;
        }
        .row.seckill_info{
            margin: 10px 0px 0px;
        }
        .secklll_title{
            font: 700 16px Arial,"microsoft yahei";
            color: #666;
            padding-top: 10px;
            line-height: 28px;
            margin-bottom: 5px;
        }
        .seckillInfo{
            margin-bottom: 5px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            max-height: 1.5em;
            line-height: 1.5em;
            color: #e4393c;
        }
        .row>.col-md-5>img{
            padding: 5px;
        }
    </style>

</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-5">
                <img th:src="${data.courseInfoVO.cover}" width="470px"/>
            </div>
            <form class="col-md-7" th:action="@{/page/courseSeckillOrder/add}" method="post">
                <input type="hidden" th:value="${data.courseSeckill.id}" name="seckillId">
                <div class="row block_right secklll_title" th:text="${data.courseSeckill.name}"></div>
                <div class="row block_right seckillInfo"
                     th:text="${data.courseInfoVO.title}">【白条24期免息】小尺寸旗舰手机,全新一代骁龙8移动平台,4500mAh大电池,
                    5000万疾速影像【点击抢购小米12pro】查看></div>
                <div class="row block_right">
                    <div class="row seckill_info_block">
                        <div class="col-md-12">
                            <i class="glyphicon glyphicon-time"></i>
                            <strong>秒杀</strong>
                        </div>
                       
                    </div>
                    <div class="row seckill_info">
                        <input name="seckillPrice" th:value="${data.courseSeckill.seckillPrice}" type="hidden"/>
                        <p>秒杀价：<span th:text="${data.courseSeckill.seckillPrice}">1022</span></p>
                        <p>原价：<span th:text="${data.courseInfoVO.price}">10999</span></p>
                        <p>促销：
                            <span>1</span>
                            <span>2</span>
                            <span>3</span>
                            <span>4</span>
                        </p>
                        <p>优惠：<span th:text="${data.courseInfoVO.price - data.courseSeckill.seckillPrice}">1253</span></p>
                    </div>
                </div>
                <div class="row block_right">
                    秒杀数量：<input type="text" id="seckill_num" value="1" name="seckillNum" readonly>
                </div>
                <div class="row block_right">
<!--                    <input th:if="${show==false}" type="button" value="等待秒杀" class="btn_block">-->
                    <input type="submit" value="立即下单" class="btn_block">
                </div>
            </form>
        </div>
    </div>
</body>

</html>